import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {Link, withRouter} from 'react-router-dom';
import cssModules from 'react-css-modules';
import {Row, Col, Button} from 'antd';
import More from '../More';
import SceneModal from '../ScreenModal';
import ModalContent from '../Module/components/ModalContent/index.js';
import {toJS} from 'mobx';

import IconFont from 'component/IconFont';
import classnames from 'classnames';
import styles from './index.less';

@inject('ScreenStore')
@observer
@cssModules(styles)
class Battery extends Component {
  state = {};
  constructor(props) {
    super(props);

    this.store = this.props.ScreenStore;
  }
  handleClick = () => {
    const {confim} = this.store;
    confim('ring');
  };
  componentWillMount() {
    const {getRing} = this.store;
    getRing();
  }
  render() {
    const {ring} = this.store;
    let data = (ring && ring.sealHeads) || [];

    return (
      <div styleName="container">
        <div styleName={'title-container'}>
          <div styleName={'title-selected'} />
          <div styleName={'title'}>动环监控</div>
        </div>
        <Row
          type="flex"
          justify="space-between"
          styleName={'ring-data'}
          align="bottom">
          {data.map((item, i) => {
            if (!item.show) return null;
            return (
              <Col span={12} key={i.toString(36) + i}>
                <div styleName={'item'}>
                  <IconFont type={item.icon} styleName={'item-icon'} />
                  <span styleName={'title'}>{item.spName}</span>
                  <span styleName={'point'}>:</span>
                  <span
                    className={classnames(
                      styles['value'],
                      i === 0 &&
                        (item.value == 1
                          ? styles['value-red']
                          : styles['value-green']),
                    )}>
                    {item.value
                      ? (((item.enums || {}).hasOwnProperty(item.value) &&
                          item.enums[item.value]) ||
                          item.value) +
                        ' ' +
                        item.unit
                      : '-'}
                  </span>
                </div>
              </Col>
            );
          })}
        </Row>
        <More handleClick={this.handleClick} />
        <SceneModal type={'ring'} title={'动环监控'}>
          <div>
            <Button className={styles['entrance-guard-settings']}>
              <a href={'http://123.159.193.22:8836/smartlocks'} target="_blank">
                门禁设置
              </a>
            </Button>
            <ModalContent data={data} />
          </div>
        </SceneModal>
      </div>
    );
  }
}

export default Battery;
